<template>
  <div class="comment">
    <div class="submitbox">
      <h3>提交评论</h3>
      <div>
        <mt-field placeholder="请输入评论内容" type="textarea" rows=5 class="inputbox" v-model="comContent"></mt-field>
        <mt-button type="primary" class="mt-15" @click="postContent">发表</mt-button>
      </div>
    </div>
    <div class="commentbox">
      <h3 class="line">评论详情</h3>
      <ul>
        <li v-for="(item,index) in commentList" :key="index">
          <h4 class="comment-content">{{item.content}}</h4>
          <p>
            <span class="comment-user">{{item.user_name}}</span>
            <span class="comment-time">{{item.add_time | fmtTime}}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="button-group">
      <mt-button size="large" type="primary" class="mt-15" v-if="hasMore" @click="loadMore">加载更多</mt-button>
      <mt-button size="large" type="danger" class="mt-15" v-else>没有更多了</mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import qs from 'qs'
import {getCommentList, getComContentPost} from '@/api'
export default {
  props: ['id'],
  data () {
    return {
      pageIndex: 1,
      commentList: [], // 评论数据
      hasMore: true,
      comContent: ''// 评论框的内容
    }
  },
  created () {
    this.initComlist()
  },
  methods: {
    // 初始化页面的评论数据
    initComlist () {
      // console.log(this.id)
      getCommentList(this.id, this.pageIndex)
        .then(res => {
          let oldComList = this.commentList
          // console.log(res)
          // this.commentList = res.message
          this.commentList = [...oldComList, ...res.message]
          if (res.message.length < 10) {
            this.hasMore = false
          }
        })
    },
    // 点击更多
    loadMore () {
      this.pageIndex += 1
      this.initComlist()
    },
    // 发表提交
    postContent () {
      // 1.9 发表评论之前先判断输入内容是否为空，为空就弹出一个提示就弹出一个提示信息
      if (!this.comContent.trim()) {
        Toast({
          message: '请输入内容后再提交！',
          position: 'middle',
          duration: 3000
        })
      } else {
        // qs处理数据
        let obj = {content: this.comContent}
        getComContentPost(this.id, qs.stringify(obj))
          .then(res => {
            // console.log(res)
            // 1.13 刷新列表前清空数据，不然会叠加数据 刷新列表，清空输入框，弹出成功信息
            this.commentList = []
            // 请空后再刷新下数据，不然会叠加
            this.initComlist()
            this.commentList = ''
            Toast({
              message: '操作成功',
              iconClass: 'iconfont icon-gouwuche'
            })
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .inputbox {
  border: 1px solid #999;
}
.comment h3 {
  font-weight: bold;
  margin: 10px 0;
  font-size: 14px;
}
.line {
  border-top: 1px solid #999;
  padding-top: 10px;
}
.commentbox{
  li:not(:last-child) {
    border-bottom: 1px solid #999;
    margin: 5px 0;
  }
  p {
    font-size: 14px;
  }
  .comment-content {
    color: #999;
    font-size: 14px;
  }
}
.comment-user, .comment-time {
  font-size: 12px;
  color: #26a2ff;
}
.mt-15{
  margin-top: 15px
}
</style>
